<template>
  <div class="register">
    <!-- 返回 -->
    <div class="register-top">
      <van-nav-bar
        title="注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 注册 -->
    <div class="register-main">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="registerData.name"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
          />
          <van-field
            v-model="registerData.phone"
            name="电话号码"
            label="电话号码"
            placeholder="电话号码"
            :rules="[{ required: true, message: '请填写电话号码' }]"
          />
          <van-field
            v-model="registerData.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group v-model="registerData.sex" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="registerData.realName"
            name="真实姓名"
            label="真实姓名"
            placeholder="真实姓名"
            :rules="[{ required: true, message: '请填写真实姓名' }]"
          />
          <van-field
            v-model="registerData.birth_date"
            is-link
            readonly
            name="datePicker"
            label="生日日期"
            placeholder="点击选择生日日期"
            @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
          </van-popup>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 弹窗 -->
    <van-dialog v-model:show="show" :title="diaTitle" @confirm="diaHandler">
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, } from 'vue';
import {userRegister} from '@/server'
import { useRouter } from 'vue-router';
const router=useRouter()
// 返回
const onClickLeft = () => history.back();
// 注册数据
const registerData=ref({
  name:'',
  phone:'',
  password:'',
  sex:'1',
  realName:'',
  project_id:'1',
  birth_date:'',
  header_img:'',
})
// 日期
const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
  registerData.value.birth_date = selectedValues.join('/');
  showPicker.value = false;
};
// 弹窗开关
const show = ref(false);
// 弹窗标题
const diaTitle=ref()
// 表单函数
const onSubmit =async (values) => {
  // 发请求
  let res=await userRegister({...registerData.value})
  // console.log(res);
  if(res.status===200){
    // 3 秒后自动关闭
    // 成功通知
    show.value=true
    diaTitle.value='注册成功！'
  }
}
// 确认弹窗跳转
const diaHandler=()=>{
  // 跳转登录
  router.push('/login')
}


</script>

<style lang='scss'>

</style>
